<template>
    <el-button class="questiontypebutton" plain @click="() => click()" :style="style">
        <slot></slot>
        <span>{{ name }}</span>
    </el-button>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'

const p = defineProps<{ type: boolean, name: string, click: Function }>()

const style = computed(() => {
    const stylebutton1 = {
        '--el-button-border-color': '#fff',
        '--el-button-hover-border-color': '#fff',
        '--el-button-hover-text-color': '#000',
        '--el-button-hover-color': '#000',
        '--el-button-hover-background-color': 'var(--color-d9)',
        '--el-button-font-color': '#000',
        '--el-button-active-font-color': '#fff',
        '--el-button-active-background-color': 'var(--color-cheng2)',
        '--el-button-active-border-color': '#fff',
        borderRadius: '4px'
    }

    const stylebuttondef = {
        '--el-button-bg-color': 'var(--color-f5)',
        '--el-button-background-color': 'var(--color-f5)',
        '--el-button-text-color': '#000',
    }

    const stylebuttoncick = {
        '--el-button-bg-color': 'var(--color-cheng)',
        '--el-button-background-color': 'var(--color-cheng)',
        '--el-button-text-color': '#fff',
    }
    if (!p.type) {
        return Object.assign(stylebutton1, stylebuttondef)
    } else {
        return Object.assign(stylebutton1, stylebuttoncick)
    }
})

</script>

<style scoped >
.questiontypebutton:focus {
    background-color: var(--color-cheng) !important;
    color: #fff;
}
.questiontypebutton:hover {
    background-color: var(--color-cheng) !important;
    color: #fff;
}
</style>